<template>
  <div class="settings-service h-full flex">
    <!-- 设置侧边栏 -->
    <div class="settings-sidebar w-64 bg-white border-r border-gray-200">
      <div class="sidebar-header p-4 border-b border-gray-200">
        <h3 class="text-lg font-semibold text-gray-800">设置</h3>
      </div>
      
      <div class="sidebar-menu p-2">
        <div
          v-for="category in settingsCategories"
          :key="category.key"
          :class="[
            'menu-item',
            { 'active': activeCategory === category.key }
          ]"
          @click="setActiveCategory(category.key)"
        >
          <el-icon class="menu-icon">
            <component :is="category.icon" />
          </el-icon>
          <span class="menu-label">{{ category.label }}</span>
        </div>
      </div>
    </div>

    <!-- 设置内容 -->
    <div class="settings-content flex-1 bg-gray-50">
      <!-- 通用设置 -->
      <div v-if="activeCategory === 'general'" class="setting-panel">
        <div class="panel-header">
          <h2 class="panel-title">通用设置</h2>
          <p class="panel-desc">配置应用的基本设置</p>
        </div>
        
        <div class="panel-content">
          <el-form :model="generalSettings" label-width="120px">
            <el-form-item label="语言">
              <el-select v-model="generalSettings.language" style="width: 200px">
                <el-option label="简体中文" value="zh-CN" />
                <el-option label="English" value="en-US" />
              </el-select>
            </el-form-item>
            
            <el-form-item label="主题">
              <el-radio-group v-model="generalSettings.theme">
                <el-radio label="light">浅色主题</el-radio>
                <el-radio label="dark">深色主题</el-radio>
                <el-radio label="auto">跟随系统</el-radio>
              </el-radio-group>
            </el-form-item>
            
            <el-form-item label="自动保存">
              <el-switch v-model="generalSettings.autoSave" />
              <span class="ml-2 text-sm text-gray-500">自动保存查询内容</span>
            </el-form-item>
            
            <el-form-item label="关闭确认">
              <el-switch v-model="generalSettings.confirmBeforeClose" />
              <span class="ml-2 text-sm text-gray-500">关闭应用前确认</span>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <!-- 编辑器设置 -->
      <div v-else-if="activeCategory === 'editor'" class="setting-panel">
        <div class="panel-header">
          <h2 class="panel-title">编辑器设置</h2>
          <p class="panel-desc">配置SQL编辑器的行为</p>
        </div>
        
        <div class="panel-content">
          <el-form :model="editorSettings" label-width="120px">
            <el-form-item label="字体大小">
              <el-input-number
                v-model="editorSettings.fontSize"
                :min="12"
                :max="24"
                controls-position="right"
              />
              <span class="ml-2 text-sm text-gray-500">px</span>
            </el-form-item>
            
            <el-form-item label="字体">
              <el-select v-model="editorSettings.fontFamily" style="width: 300px">
                <el-option label="JetBrains Mono" value="JetBrains Mono" />
                <el-option label="Consolas" value="Consolas" />
                <el-option label="Monaco" value="Monaco" />
                <el-option label="Source Code Pro" value="Source Code Pro" />
              </el-select>
            </el-form-item>
            
            <el-form-item label="自动换行">
              <el-switch v-model="editorSettings.wordWrap" />
            </el-form-item>
            
            <el-form-item label="显示行号">
              <el-switch v-model="editorSettings.lineNumbers" />
            </el-form-item>
            
            <el-form-item label="小地图">
              <el-switch v-model="editorSettings.minimap" />
            </el-form-item>
          </el-form>
        </div>
      </div>

      <!-- 数据库设置 -->
      <div v-else-if="activeCategory === 'database'" class="setting-panel">
        <div class="panel-header">
          <h2 class="panel-title">数据库设置</h2>
          <p class="panel-desc">配置数据库连接和查询行为</p>
        </div>
        
        <div class="panel-content">
          <el-form :model="databaseSettings" label-width="120px">
            <el-form-item label="查询超时">
              <el-input-number
                v-model="databaseSettings.queryTimeout"
                :min="5"
                :max="300"
                controls-position="right"
              />
              <span class="ml-2 text-sm text-gray-500">秒</span>
            </el-form-item>
            
            <el-form-item label="最大行数">
              <el-input-number
                v-model="databaseSettings.maxRows"
                :min="100"
                :max="10000"
                :step="100"
                controls-position="right"
              />
              <span class="ml-2 text-sm text-gray-500">行</span>
            </el-form-item>
            
            <el-form-item label="自动提交">
              <el-switch v-model="databaseSettings.autoCommit" />
              <span class="ml-2 text-sm text-gray-500">自动提交事务</span>
            </el-form-item>
            
            <el-form-item label="保存密码">
              <el-switch v-model="databaseSettings.savePasswords" />
              <span class="ml-2 text-sm text-gray-500">保存连接密码</span>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <!-- 关于 -->
      <div v-else-if="activeCategory === 'about'" class="setting-panel">
        <div class="panel-header">
          <h2 class="panel-title">关于</h2>
          <p class="panel-desc">应用信息和版本</p>
        </div>
        
        <div class="panel-content">
          <div class="about-content text-center">
            <div class="app-logo mb-6">
              <el-icon class="text-6xl text-blue-500"><Coin /></el-icon>
            </div>
            
            <h3 class="app-name text-2xl font-bold mb-2">Database Manager</h3>
            <p class="app-version text-gray-500 mb-4">版本 1.0.0</p>
            
            <div class="app-info bg-white rounded-lg p-6 text-left">
              <div class="info-item">
                <span class="info-label">开发框架:</span>
                <span class="info-value">Wails 3 + Vue 3</span>
              </div>
              <div class="info-item">
                <span class="info-label">UI框架:</span>
                <span class="info-value">Element Plus + Tailwind CSS</span>
              </div>
              <div class="info-item">
                <span class="info-label">支持数据库:</span>
                <span class="info-value">MySQL, PostgreSQL, SQLite, SQL Server</span>
              </div>
              <div class="info-item">
                <span class="info-label">构建时间:</span>
                <span class="info-value">{{ buildTime }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useAppStore } from '@/stores'

const appStore = useAppStore()

// 响应式数据
const activeCategory = ref('general')

// 设置分类
const settingsCategories = [
  { key: 'general', label: '通用', icon: 'Setting' },
  { key: 'editor', label: '编辑器', icon: 'Document' },
  { key: 'database', label: '数据库', icon: 'Coin' },
  { key: 'about', label: '关于', icon: 'InfoFilled' }
]

// 设置数据
const generalSettings = ref({
  language: 'zh-CN',
  theme: 'light',
  autoSave: true,
  confirmBeforeClose: true
})

const editorSettings = ref({
  fontSize: 14,
  fontFamily: 'JetBrains Mono',
  wordWrap: true,
  lineNumbers: true,
  minimap: false
})

const databaseSettings = ref({
  queryTimeout: 30,
  maxRows: 1000,
  autoCommit: true,
  savePasswords: true
})

// 计算属性
const buildTime = computed(() => {
  return new Date().toLocaleString()
})

// 生命周期
onMounted(() => {
  // 从store加载设置
  loadSettings()
})

// 方法
const setActiveCategory = (category) => {
  activeCategory.value = category
}

const loadSettings = () => {
  // 从appStore加载设置
  const settings = appStore.settings
  
  generalSettings.value = {
    language: settings.language || 'zh-CN',
    theme: appStore.theme || 'light',
    autoSave: settings.autoSave !== false,
    confirmBeforeClose: settings.confirmBeforeClose !== false
  }
}

const saveSettings = () => {
  // 保存设置到store
  appStore.updateSettings({
    language: generalSettings.value.language,
    autoSave: generalSettings.value.autoSave,
    confirmBeforeClose: generalSettings.value.confirmBeforeClose
  })
  
  // 应用主题
  if (generalSettings.value.theme !== appStore.theme) {
    appStore.setTheme(generalSettings.value.theme)
  }
  
  ElMessage.success('设置已保存')
}

// 监听设置变化并自动保存
const watchSettings = () => {
  // 这里可以添加设置变化的监听器
  // 实现自动保存功能
}
</script>

<style scoped>
.settings-service {
  background: #f5f7fa;
}

.settings-sidebar {
  min-width: 256px;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  margin: 2px 0;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.menu-item:hover {
  background-color: #f0f9ff;
}

.menu-item.active {
  background-color: #e0f2fe;
  color: #0369a1;
  font-weight: 500;
}

.menu-icon {
  margin-right: 8px;
  font-size: 16px;
}

.menu-label {
  font-size: 14px;
}

.setting-panel {
  height: 100%;
  overflow-y: auto;
}

.panel-header {
  padding: 24px 24px 16px;
  border-bottom: 1px solid #e5e7eb;
  background: white;
}

.panel-title {
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 4px;
}

.panel-desc {
  color: #6b7280;
  margin: 0;
}

.panel-content {
  padding: 24px;
  background: white;
  margin: 16px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.about-content {
  max-width: 500px;
  margin: 0 auto;
}

.app-info {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.info-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #f3f4f6;
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  font-weight: 500;
  color: #374151;
}

.info-value {
  color: #6b7280;
}
</style> 